<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :label-width="100" inline>
          <FormItem label="订单单号">
            <Input v-model="orderId" placeholder="请输入查询的订单单号"></Input>
          </FormItem>
          <FormItem label="选择类型">
            <Select v-model="state" style="width: 200px">
              <Option value="">全部状态</Option>
              <Option value="0">正在退货</Option>
              <Option value="1">退货完成</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">查询</Button>
          </FormItem>
        </Form>

        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "refund",
  data() {
    return {
      orderId: '',
      state: '',
      startTime: '',
      endTime: '',
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    getCols() {
      return [
        {title: '订单单号', key: 'orderInfoIds', tooltip: true, align: 'center', width: 150},
        {title: '退款单号', key: 'refundIds', tooltip: true, align: 'center', width: 150},
        {title: '退款金额', key: 'refundMoney', tooltip: true, align: 'center', width: 150},
        {title: '货物状态', key: 'refundCargo', tooltip: true, align: 'center', width: 150},
        {title: '退货原因', key: 'refundCause', tooltip: true, align: 'center'},
        {title: '退货时间', key: 'refundCreatime', tooltip: true, align: 'center', width: 200},
        {
          title: '退货状态', key: 'refundStatus', tooltip: true, align: 'center', width: 200, render(h, obj) {
            let type = "未知"
            if (obj.row.refundStatus === "0") {
              type = "正在退货"
            } else if (obj.row.refundStatus === "1") {
              type = "退货完成"
            }
            return h(('div'), type)
          }
        }
      ]
    },
    search(){
      this.loadData()
    },
    loadData() {
      let that = this;
      let params = {};
      params.orderId = this.orderId
      params.state = this.state
      params.startTime = this.startTime
      params.endTime = this.endTime
      params.pageSize = this.pageSize
      params.pageNum = this.pageNum
      this.$http.postJson('/business/refuse', params).then(res => {
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
        that.tableData = res.data
        that.total = res.total
      })
    },
    pageChange(val) {
      this.pageNum = val
      this.loadData()
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
